<template>
    <div class="subBuy">
        <!-- 下载提示按钮 -->
        <div class="down" :class="{active:lang=='en'}">
            <div class="left">
                <img src="http://img.xianyufanshen.net//share/image/logo_fenxiang@2x.png" alt="">
            </div>
            <dl class="middle" v-if="lang=='zh' ">
                <dt>咸鱼翻身APP</dt>
                <dd>收藏品互换交易平台</dd>
            </dl>
            <dl class="middle en" v-else>
                <dt>xianyufanshen APP</dt>
                <dd>Collectibles and exchange trading platform</dd>
            </dl>
            <div  v-if="lang=='zh' " @click="down" class="right">下载APP</div>
            <div  v-else @click="down" class="right en">Download APP</div>
        </div>
        <!-- 轮播图 -->
        <div class="swiper-box">
            <van-swipe :autoplay="3000">
                <van-swipe-item v-for="(img,index) in images" :key="index">
                    <img :src="img" alt="">
                </van-swipe-item>
            </van-swipe>
            <div v-if="lang=='zh' " class="tip">支付款先由平台托管，验收完成后，再确认付款到卖家账户</div>
            <div v-else class="tip en">the payment by platform,After acceptance,Reconfirm payment to the seller account</div>
        </div>
        <!--标题  -->
        <div class="title-box">
            <h1><i></i>
                <!-- <span>925纯银吊坠女 天然玉髓长命锁背面双吻福鱼短款锁骨项链玉石饰品</span> -->
                <span v-if="lang == 'zh'">{{data.title_cn}}</span> 
                <span v-else>{{data.title_en}}</span> 
                
            </h1>
            <p v-if="lang=='zh' " >自我估价：<span>￥{{data.price}}</span></p>
            <p v-else>price：<span>￥{{data.price}}</span></p>
            <div class="msg" v-if="lang=='zh' ">
                <span>品相：<i>{{data.out_view}}</i></span>
                <span>库存：<i>{{data.stock}}</i></span>
                <span>来源：<i>{{data.source}}</i></span>
            </div>
            <div class="msg" v-else>
                <span>Exterior：<i>{{data.out_view}}</i></span>
                <span>stock：<i>{{data.stock}}</i></span>
                <span>source：<i>{{data.source}}</i></span>
            </div>
        </div>
        <!-- 商品描述 -->
        <dl class="des-box">
            <dt v-if="lang=='zh' ">
                <i></i>商品描述 <span>听听卖家怎么说</span>
            </dt>
            <dt v-else>
                <i></i>description <span>What the seller said</span>
            </dt>
            <dd>{{data.description}}</dd>
        </dl>
        <!-- 商品详情 -->
        <dl class="des-box">
            <dt v-if="lang=='zh' ">
                <i></i>商品详情 <span>查看详情更明了</span>
            </dt>
            <dt v-else>
                <i></i>product details <span>See the details more clearly</span>
            </dt>
            <dd class="img-box" v-for="(item,index) in data.img_list" :key="index">
                <img :src="item" alt="">
            </dd>
        </dl>
        <!-- 底部操作按钮 -->
        <div class="btn-box"  @click="down" v-if="lang=='zh' ">
            <div class="btn btn1"><i></i>收藏</div>
            <div class="btn ">购买</div>
            <div class="btn btn3">置换</div>
        </div>
        <div class="btn-box"  @click="down" v-else>
            <div class="btn btn1"><i></i>Collection</div>
            <div class="btn ">buy</div>
            <div class="btn btn3">exchange</div>
        </div>
        <!-- loading -->
        <div class="loading-box" v-show="loading">
             <van-loading type="spinner" color="white" />
        </div>
    </div>
</template>
<script>
import axios from "axios";
import jquery from "@/common/jquery-3.3.1.min.js"
import { Loading,Swipe,SwipeItem,Lazyload} from 'vant';

export default {
    name:'goodsShare',
    //声明组件
    components:{
        [Loading.name]:Loading,
        [Swipe.name]:Swipe,
        [SwipeItem.name]:SwipeItem,
        [Lazyload.name]:Lazyload,
    },
    data (){
        return{
           lang:'zh',//当前网页语言类型 zh 中文  en 英语  
           id:0,//当前商品id
           userId:0,//用户id 
           data:{},//从服务器接收的数据
           images: [],//轮播图
           loading:true,//加载提示框 是否显示(页面初始加载显示
        //    isPageShow:false,//页面是否显示
        }
    },
    //实例创建完成后被立即调用
    created (){
        this.changeTitle();//调用修改title
        //获得语言类型lang
        if(this.$route.query.lang) {
            this.lang = this.$route.query.lang;
        }
        //获取商品id
        if(this.$route.query.id && this.$route.query.id > 0){
            this.id = this.$route.query.id;
             //请求数据
             this.getAllData();
        }else{
            Toast('获得商品ID失败，请返回列表页重试'); 
            this.loading = false;
        }
    },
    //
    methods:{
          //判断是否是微信浏览器的函数
        isWeiXin(){
            //window.navigator.userAgent属性包含了浏览器类型、版本、操作系统类型、浏览器引擎类型等信息，这个属性可以用来判断浏览器类型
            var ua = window.navigator.userAgent.toLowerCase();
            //通过正则表达式匹配ua中是否含有MicroMessenger字符串
            if(ua.match(/MicroMessenger/i) == 'micromessenger'){
                return true;
            }else{
                return false;
            }
        },
        //获得所有详情数据
        getAllData(){
            let _id = this.$route.query.id;
            let _this = this;
            axios
                .get("/api/goods/detail", {
                    params: {
                        userId:_this.userId,
                        goodsId: _id,
                        lang:_this.lang,
                    }
                })
                .then(res => {
                // console.log(res);
                // this.isPageShow = true;
                if (res.data.code == 200) {
                    let data = res.data.data;
                    _this.data = data;
                    _this.images =  data.banner_img;
                    // console.log(this.images);
                    setTimeout(function(){
                        _this.loading = false;
                    },1500)
                  
                } else {
                    Toast(res.data.msg);
                }
                })
                .catch(function(error) {
                     console.log(error);
            });
        },
        //下载app
        down(){
            // console.log("下载");
            this.$router.push({path:"/appShare",query:{lang:this.lang}});
        },
        //动态修改title
        changeTitle(){
            let that = this;
            let title = '咸鱼翻身';
            //判断是否微信环境
            if(that.isWeiXin()){
                // alert("微信");
                var $body = $('body');
                document.title = title;
                var $iframe = $("<iframe style='display:none;'></iframe>");
                $iframe.on('load',function() {
                    setTimeout(function() {
                        $iframe.off('load').remove();
                    }, 0);
                }).appendTo($body);
            }else{
                //alert("不是微信");
                document.title  = title;
            }
        },
    }
    
}
</script>

<style lang="stylus" scoped>
*{
    box-sizing :border-box;
}
img{
    width :100%;
    height :100%;
}

.subBuy{
    height:100%;
    //下载
    .down{
        background:#ffffff;
        height:50px;
        padding :0 15px;
        position:fixed;
        left:0;
        top :0;
        width :100%;
        z-index :99;
        &.active{
          padding :0 10px 0 5px;  
        }
        .left{
            width :36px;
            height :36px;
            float:left;
            margin-top :7px;
            img{
                width :100%;
                height :100%;
            }
        }
        .middle{
            float:left;
            margin-left :14px;
         
            dt{
                font-family:PingFangSC-Medium;
                font-size:14px;
                color:#494949;
                letter-spacing:0.19px;
                text-align:left;
                height :20px;
                line-height :20px;
                margin-top :7px;
            }
            dd{
               font-family:PingFangSC-Regular;
                font-size:10px;
                color:#a2a2a2;
                letter-spacing:0.14px;
                text-align:center; 
                height :14px;
                line-height :14px;
            }
            &.en{
                @media screen  and (max-width:320px){
                    margin-left :5px;
                    width :55%;
                    overflow:hidden; //超出的文本隐藏
                    text-overflow:ellipsis; //溢出用省略号显示
                    white-space:nowrap; //溢出不换行

                    
                }
               
                dd{
                     @media screen  and (max-width:320px){
                       overflow:hidden;
                    }
                }
            }
        }
        .right{
            float:right;
            background:#151515;
            border-radius:100px;
            width:101px;
            height:36px;    
            font-family:PingFangSC-Medium;
            font-size:13px;
            color:#cb9c57;
            letter-spacing:0.18px;
            text-align:center;   
            margin-top :7px;
            line-height :36px;
            text-align :center; 
          
            &.en{
                margin-right: -5px;
                font-size :11px;
                width :98px;
                @media screen  and (max-width:320px){
                     width :98px;
                }
            }
        }
    }
    //轮播图
    .swiper-box{ 
        position:relative;
        margin-top :50px;
        .tip{
            opacity:0.5;
            background:#000000;
            width:100%;
            height:30px;
            position :absolute;
            left:0;
            bottom:0;
            font-family:PingFangSC-Regular;
            font-size:12px;
            color:#ffffff;
            letter-spacing:0.33px;
            overflow:hidden;
            text-overflow :ellipsis;
            white-space :nowrap;
            padding-left :10px;
            line-height :30px;
            &.en{
                height:auto;
                line-height :22px;
                white-space :normal; 
            }
        }
    }
    //标题
    .title-box{
        padding :10px;
        background :#fff;
        h1{
            font-family:PingFangSC-Medium;
            font-size:16px;
            color:#494949;
            letter-spacing:0.22px;
            text-align:left;
            position :relative;
            padding-left :19px;
            line-height: 20px;

            i{
                position:absolute;
                left:0;
                top:2px;
                height :16px;
                width :13px;
                background :url("http://img.xianyufanshen.net//share/image/pingtaidanbao@2x.png") no-repeat;
                background-size :100%;
            }
        }
        p{
            font-family:PingFangSC-Regular;
            font-size:14px;
            color:#494949;
            letter-spacing:0.49px;
            text-align:left;
            margin :15px 0;
            line-height :25px;
            span{
                color:#cb9c57;
            }
        }
        .msg{
            display: -webkit-flex; /* Safari */
            display: flex;
            justify-content:space-between;
            margin-bottom :5px;
            span{
                font-family:PingFangSC-Regular;
                font-size:13px;
                color:#a2a2a2;
                letter-spacing:0.36px;
                text-align:left;
                i{
                   color:#cb9c57;
                }
            }
        }
    } 
    // 商品描述和详情
    .des-box{
        padding :10px 0;
        background :#fff;
        margin :7px 0;
        dt{
            font-family:PingFangSC-Semibold;
            font-size:15px;
            color:#494949;
            letter-spacing:0;
            text-align:left;
            position:relative;
            height :18px;
            line-height :18px;
            padding-left :13px;
            i{
                position:absolute;
                left:0;
                top:0;
                height :18px;
                width :5px;
                background :url("http://img.xianyufanshen.net//share/image/kuai@2x.png") no-repeat;
                background-size :100%;
            }
            span{
                font-family:PingFangSC-Regular;
                font-size:12px;
                color:#a2a2a2;
                letter-spacing:0.17px;
                text-align:left;
                margin-left :9px;
            }
        }
        dd{
            font-family:PingFangSC-Regular;
            font-size:13px;
            color:#494949;
            letter-spacing:0.64px;
            line-height:23px;
            text-align:left;
            padding :10px 10px 0;
            &.img-box{
                width :100%;
                margin-top :10px;
                padding: 0;
                margin :0;
                margin-bottom :48px;
                img{
                    width :100%;
                    height :auto;
                     margin :0;
                }
            }
        }
    } 
    //底部操作按钮
    .btn-box{
        background:#ffffff;
        height:45px;
        position:fixed;
        left:0;
        bottom :0;
        width :100%;
        .btn{
            height:45px;
            line-height :45px;
            background:#151515;
            font-family:PingFangSC-Regular;
            font-size:14px;
            color:#ffffff;
            letter-spacing:0.19px;
            text-align:center;
            box-sizing :border-box;
            width :33.33333333333%;
            float:left;
            &.btn1{
                background :#fff;
                color:#cb9c57;
                // position :relative;
                // padding-left :19px;
                i{
                    width :15px;
                    height :13px;
                    background :url("http://img.xianyufanshen.net//share/image/shoucang@2x.png") no-repeat;
                    background-size :100%;
                    margin-right: 5px;
                    position: relative;
                    top: 1px;
                    display: inline-block;
                }
            }
            &.btn3{
                background :url("http://img.xianyufanshen.net//share/image/anniu_zhihuan@2x.png") no-repeat;
                background-size :cover;
            }
        }
    }  
}
.loading-box{
    width :50px;
    height :50px;
    border-radius :3px;
    background :rgba(0,0,0,.5);
    position :fixed;
    left :50%;
    top:50%;
    margin-left:-25px;
    margin-top :-25px;
    z-index :999999;
    text-align :center;
    vertical-align :middle;
    .van-loading{
       left :50%;
       top:50%;
       margin-left :-15px;
       margin-top :-15px;
    }
}
</style>
<style <style lang="stylus">
    .van-swipe .van-swipe__indicators{
    bottom: 45px !important;
}
</style>

